<template>
    <div>
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
          <a-form layout="inline" class="search-form" >
              <a-form-item>
                  <a-button class="blue-btn" type="primary" @click="editHandele(row)">办理</a-button>
              </a-form-item>
          </a-form>
        </template>
      </commpVxeTable>
      <handleModal ref="handleModalRef" :passObj="passObj" :linkName="linkName" @success="success"></handleModal>
    </div>
  </template>
  <script>
  import assessCheckApi from './service/api.js'
  import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
  import handleModal from '../index/handleModal.vue'
  import { deleteLgqsFlowJob } from './service/index.js'
  export default {
    components: {
      commpVxeTable,handleModal
    },
    props:{
      linkName:{
        type:String,
        default:'',
        required:false,
      }
    },
    data() {
      return {
        reCommpVxeTable: '',
        dataTableConfig: {
          api: assessCheckApi.list,
          rowId: 'joid',
          urlType: true,
          paramet:{
            fhjmc: this.linkName,
          }
        },
        formItem: [
          {
            label: '提交人',
            model: 'ftjr',
          },{
            label: '摘要',
            model: 'fzy',
          },
        ],
        columnsVxe: [
          {
            type: 'checkbox',
            width: 60,
            fixed: 'left'
          },{
            title: '提交人',
            field: 'ftjr',
          },{
            title: '提交部门',
            field: 'ftjrbm',
          },{
            title: '发送时间',
            field: 'ffssj',
          },{
            title: '开始日期',
            field: 'fksrq',
          },{
            title: '结束日期',
            field: 'fjsrq',
          },{
            title: '是否预付款',
            field: 'fsfyfk',
          },{
            title: '摘要',
            field: 'fzy',
          },{
            title: '操作',
            field: 'jobid',
            slots: {
            // 使用插槽模板渲染
              default: 'operation_btn',
            },
          }
        ],
        joidList: [],
        passObj: {},
      }
    },
    methods: {
      // 勾选
      checkboxChange(val){
        //console.log('已选择',val)
        this.joidList = []
        if(val.length){
          val.forEach(item => {
              this.joidList.push(item.joid)
          });
        }
      },
      // 搜索
      searchEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
      },
      // 编辑
      editHandele(row){
        this.passObj = {
            ...row,
            id: row.oaid
          }
          this.$nextTick(_ => {
              this.$refs.handleModalRef.handleModalVisible = true
          })
      },
      // 弹窗提交成功
      success(){
        // 刷新表格 清空id数组
        this.$refs.administrativeOffice.searchEvent()
        this.joidList = []
      },
    },
  }
  </script>
  <style lang="less">
  .red-btn{
      color:  white !important;
      border: 1px solid #ed5565 !important;
      background-color: #ed5565 !important;
  }
  </style>
